{% extends "templates/base.phtml" %}
{%block content%}
{% if wxc is defined %}
<div class="page-content-wrap">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default tabs">
                {%include 'include/wx_tabs' with ['action':'reply']%}
                <div class="panel-body tab-content">
                    <div class="tab-pane active">
                        <div class="col-md-12">
                            <div class="col-md-3 col-xs-6 pull-left">
                                <h3>新建多图文自定义内容</h3>
                            </div>
                            <div class="col-md-2 col-xs-2 pull-right">
                                <a class="btn btn-success back" href="/admin/appwx/multi/">返回</a>
                            </div>
                            <div class="form-horizontal">
                                <div class="panel panel-default">
                                    <div class="panel-body def-pan-bd">
                                        <div class="col-bd col-md-12 col-xs-12">
                                            <div class="col-md-10 form-horizontal">
                                                <div class="form-group">
                                                    <label class="col-md-3 col-xs-12 control-label">关键词：</label>

                                                    <div class="col-md-6 col-xs-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><span
                                                                    class="fa fa-pencil"></span></span>
                                                            <input type="text" class="form-control J-key">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="col-md-3 col-xs-12 control-label">图文消息:</label>

                                                    <div class="col-md-6 col-xs-12">
                                                        <div class="input-group">
                                                            <button class="btn btn-success" data-toggle="modal"
                                                                    data-target="#myModal">添加图文消息
                                                            </button>
                                                            <button class="btn btn-danger J-delete">清空重选</button>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group J-multi-form">
                                                    <label class="col-md-3 col-xs-12 control-label"></label>
                                                </div>

                                                <div class="form-group col-md-12">
                                                    <div class="col-md-6 col-xs-12 col-md-offset-4">
                                                        <button class="btn btn-primary J-save">保存</button>
                                                        <button class="btn btn-danger">取消</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{%endif%}
{%endblock%}
{%block div%}
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">选择图文消息</h4>
            </div>
            <div class="modal-body">
                <iframe src="/admin/appwx/selectimg" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</div>
{%endblock%}
{%block end%}
<script type="application/javascript">
    //处理子页面传递过来的数据
    var id_list = [];
    var i = 0;
    var deal = function (id, title, img, info) {
        //存id
        var multi_wrap = "<div class=\"multi-wrap col-md-6 col-xs-10\"></div>";
        var small_list = "<div class=\"small-list\"></div>";
        var top_multi = "<div class=\"top-multi\"> <img class=\"J-img\" src=\"" + img + "\"/> <div class=\"title-wrap\"> <p class=\"J-title\">" + title + "</p> </div> </div>";
        var small_multi = "<div class=\"small-multi col-md-12\"> <div class=\"J-title col-md-9 col-xs-9\"> <p>" + title + "</p> </div> <div class=\"J-img col-md-3 col-xs-3  pull-right\"> <img src=\"" + img + "\"/> </div> </div>";

        id_list[i++] = id;
        if ($(".J-multi-form").has(".multi-wrap").length == 1) {
            $(".small-list").append(small_multi);
        } else {
            $(".J-multi-form").append(multi_wrap);
            $(".multi-wrap").prepend(top_multi);
            $(".multi-wrap").append(small_list);
        }
    };
    //保存提交
    $(".J-save").click(function () {
        $.post("/admin/appwx/addmulti", {"id_string": id_list.toString(), "key": $(".J-key").val()},
            function (data) {
//                console.log(data);
                if (data.status == 1) {
                    window.location = "/admin/appwx/multi";
                }

//
            }, "json");
    });

    //供子页面调用，传递数据到父页面
    var sendInfo = function (id, title, img, info) {
        deal(id, title, img, info);
        $('#myModal').modal('hide');
    };
    //清空重选
    $(".J-delete").click(function () {
        i = 0;
        id_list.length = 0;
        $("div").remove(".multi-wrap");
    });
</script>
<!-- END SCRIPTS -->
<style type="text/css">
    .back {
        position: relative;
        bottom: 5px;
    }

    .J-delete {
        margin-left: 20px;
    }

    iframe {
        width: 100%;
        height: 100%;
    }

    .modal-body {
        height: 400px;
    }

    .multi-wrap {
        padding: 0px !important;
        border: 1px solid #D5D5D5;
    }

    .top-multi {
        position: relative;
        height: 120px;
        overflow: hidden;
        padding: 5px !important;
    }

    .top-multi .J-img {
        width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
    }

    .top-multi .title-wrap {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30px;
        background: rgba(101, 101, 101, 0.6);
    }

    .top-multi .J-title {
        color: #ffffff;
    }

    .small-multi {
        padding: 5px 10px !important;
        border-bottom: 1px solid #D5D5D5;

    }

    .small-multi .J-title {
        margin-top: 15px;
    }

    .small-multi .J-img {
        padding: 0 !important;
        height: 50px;
        width: 50px;
        overflow: hidden;
    }

    .small-multi .J-img img {
        width: 100%;
        height: auto;
    }
</style>
{%endblock%}